<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./node_modules/axios/dist/axios.js"></script>
        <script src="./node_modules/lib-flexible/flexible.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .app {
                height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            }
            .header {
                width: 100%;
                height: 0.88rem;
                background-color: orange;
            }
            .container {
                flex: 1;
                width: 100%;
                overflow-y: auto;
                background-color: lightgray;
                display: flex;
            }
            .footer {
                width: 100%;
                height: 0.88rem;
                background-color: orange;
            }
            .container .left {
                width: 2.6667rem;
                flex: none;
                overflow-y: auto;
            }
            .container .left .item {
                height: 0.88rem;
                line-height: 0.88rem;
                text-align: center;
                border-bottom: 1px solid #ccc;
                background-color: #fff;
                font-size: 0.32rem;
            }
            .container .left .item.active {
                background-color: lightskyblue;
                color: #fff;
                font-weight: bold;
            }
            .container .right {
                padding: 0.2667rem;
                flex: 1;
                overflow-y: auto;
            }
            .container .right .cat-product {
                display: flex;
                flex-wrap: wrap;
                gap: 0.2667rem;
                margin-bottom: 0.4rem;
            }
            .container .right .item {
                width: 3.2rem;
                height: 4.2667rem;
                background-color: #fff;
                border-radius: 0.1333rem;
                padding: 0.2667rem;
                box-shadow: 0 0 0.1333rem rgba(0, 0, 0, 0.1);
            }
            .container .right .title {
                width: 100%;
                height: 0.88rem;
                line-height: 0.88rem;
                text-align: center;
                font-size: 0.36rem;
                font-weight: bold;
                color: lightcoral;
                background-color: #fff;
            }
            .container .right .item img {
                width: 100%;
                height: 2.4rem;
                object-fit: cover;
                border-radius: 0.1333rem;
            }
        </style>
    </head>
    <body>
        <div class="app">
            <div class="header"></div>
            <div class="container">
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="footer"></div>
        </div>
        <script>
            window.onload = async function () {
                let { data: categories } = await axios.get(
                    "http://localhost:3000/categories"
                );
                let { data: products } = await axios.get(
                    "http://localhost:3000/products"
                );
                document.querySelector(".left").onclick = function (e) {
                    // this.querySelector(".active").classList.remove("active");
                    // e.target.classList.add("active");
                    document
                        .querySelectorAll(".right .title")
                        .forEach((title) => {
                            if (title.dataset.catid == e.target.dataset.catid) {
                                title.scrollIntoView({ behavior: "smooth" });
                            }
                        });
                };

                document.querySelector(".left").innerHTML = categories
                    .map(
                        (category, index) => `
                    <div class="item ${
                        index === 0 ? "active" : ""
                    }" data-catId="${category.id}">${category.name}</div>
                      
                `
                    )
                    .join("");
                document.querySelector(".right").innerHTML = categories
                    .map(
                        (cat) => `
                    <div class="cat-product">
                        <div class="title" data-catId="${cat.id}">${
                            cat.name
                        }</div>
                        ${products
                            .filter((product) => product.categoryId === cat.id)
                            .map(
                                (product) => `
                        
                                <div class="item">
                                    <img src="${product.image}" alt="" />
                                    <p class="name">${product.name}</p>
                                    <p class="price">￥${product.price}</p>
                                </div>
                        
                        `
                            )
                            .join("")}
                    </div>
                `
                    )
                    .join("");

                document.querySelector(".container .right").onscroll =
                    function (e) {
                        console.log(e.target.scrollTop);
                        document
                            .querySelectorAll(".right .title")
                            .forEach((title) => {
                                if (title.offsetTop - e.target.scrollTop < 50) {
                                    document
                                        .querySelector(".left .active")
                                        .classList.remove("active");
                                    document
                                        .querySelector(
                                            `.left .item[data-catid="${title.dataset.catid}"]`
                                        )
                                        .classList.add("active");
                                }
                            });
                    };
            };
        </script>
    </body>
</html>
